<template>
  <div class="searchBox">
    <el-form ref="filtrateForm" :model="filtrateForm" label-width="80px">
      <el-form-item label="科目">
        <el-radio-group v-model="filtrateForm.course" size="medium">
          <template v-for="(item, index) in course">
            <el-radio-button :label="index+1" :key="index">{{ item }}</el-radio-button>
          </template>
        </el-radio-group>
      </el-form-item>

      <el-row>
        <el-col :span="18">
          <el-form-item label="试题类型">
            <el-radio-group v-model="filtrateForm.genre" size="medium">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="trueTopic">真题</el-radio-button>
              <el-radio-button label="modelTopic">模拟题</el-radio-button>
              <el-radio-button label="exercise">课后练习</el-radio-button>
              <el-radio-button label="work">课后作业</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="float:right;text-align:right;">
          <el-input v-model="keyWord" style="width:60%"/>
          <el-button icon="el-icon-search" type="primary">搜索</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="试题状态">
            <el-radio-group v-model="filtrateForm.status" size="medium">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="edit">正在编辑</el-radio-button>
              <el-radio-button label="await">等待审核</el-radio-button>
              <el-radio-button label="success">发布成功</el-radio-button>
              <el-radio-button label="notGo">审核不通过</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="float:right;text-align:right;">
          <el-button icon="el-icon-plus" type="primary" @click="addQuestions">添加试卷</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-card>
      <div style="margin-top:20px;">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">批量删除</el-checkbox>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteAll">删除</el-button>
      </div>
      <div class="taskListBox">
        <ul>
          <li v-for="(item1, index1) in taskListBox" :key="index1" style="margin-top:20px;">
            <el-checkbox v-model="item1.checkModel" @change="handleCheckItemChange" />
            <div
              :class="item1.status=='等待审核'?'active1': item1.status == '发布成功'?'active2':item1.status == '审核不通过'?'active3':'active4'"
              class="status"
            >
              {{ item1.status }}
              <div :v-if="item1.issueTime" style="margin-top:5px;color:#999;">{{ item1.issueTime }}</div>
            </div>
            <span class="title">{{ item1.title }}</span>
            <div class="operator">
              <div class="operator-list">
                编辑者
                <span>{{ item1.compiler }}</span>
              </div>
              <div class="operator-list">
                审核者
                <span>{{ item1.auditor }}</span>
              </div>
            </div>
            <div class="handle">
              <div>
                <el-button type="danger" class="littleBtn" @click="deleteList">删除</el-button>
                <el-button type="primary" class="littleBtn lastBtn" @click="editList">编辑</el-button>
              </div>
              <div>
                <div>
                  <el-button type="warning" @click="showStatistics">统计</el-button>
                </div>
                <div style="margin-top:5px;">
                  <el-button type="success" @click="auditQuestion">审核</el-button>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </el-card>
    <!-- 统计弹框 -->
    <el-dialog :visible.sync="statisticsDialog" title="考试统计" width="1000px">
      <el-row :gutter="10" style="line-height:32px;">
        <el-col :span="20">
          <el-col :span="6">
            <span>试卷名称：</span>
            <span>{{ papers.name }}</span>
          </el-col>
          <el-col :span="5">
            <span>试卷作答人数：</span>
            <span>{{ papers.peopleNum }}人</span>
          </el-col>
          <el-col :span="4">
            <span>最高分：</span>
            <span>{{ papers.topScore }}分</span>
          </el-col>
          <el-col :span="4">
            <span>最低分：</span>
            <span>{{ papers.lowestMark }}分</span>
          </el-col>
          <el-col :span="4">
            <span>平均分：</span>
            <span>{{ papers.meanScore }}分</span>
          </el-col>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" size="mini" @click="exportExcel">导出数据</el-button>
        </el-col>
      </el-row>
      <el-table id="out-table" :data="statisticsTableData" border style="width: 100%;margin-top:20px;">
        <el-table-column prop="name" label="学员名称" align="center"/>
        <el-table-column prop="userName" label="用户名" align="center"/>
        <el-table-column prop="phoneNum" label="手机号" align="center"/>
        <el-table-column prop="score" label="当前试卷分数" align="center"/>
        <el-table-column prop="examTime" label="考试时间" align="center"/>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="statisticsDialog = false">取 消</el-button>
        <el-button type="primary" @click="statisticsDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  data() {
    return {
      course: [],
      keyWord: '',
      filtrateForm: {
        course: 1,
        genre: 'all',
        status: 'all'
      },
      checkAll: false, // 是否全选
      taskListBox: [
        { id: 1, type: 'singleChoice', status: '正在编辑', title: '读万卷书', compiler: '张三', auditor: '李四', checkModel: false },
        { id: 2, type: 'muchChoiceit', status: '等待审核', title: '行万里路', compiler: '刘华', auditor: '王田', checkModel: false },
        { id: 3, type: 'judge', status: '发布成功', title: '仰望天空', compiler: '赵娜', auditor: '赵月', checkModel: false, issueTime: '2019-06-03' },
        { id: 3, type: 'shortAnswer', status: '审核不通过', title: '脚踏实地', compiler: '赵娜', auditor: '赵月', checkModel: false, issueTime: '' }
      ],
      statisticsDialog: false,
      papers: {
        name: '物理一单元考试',
        peopleNum: '35',
        topScore: '98',
        lowestMark: '69',
        meanScore: '86'
      },
      statisticsTableData: [
        {
          name: '成龙',
          userName: 'Jackie Chan',
          phoneNum: '13531313535',
          score: '100',
          examTime: '2019-06-30'
        }
      ]
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      this.course = this.$route.query.course
    },
    handleCheckAllChange(val) {
      this.taskListBox.map((item, i) => {
        item.checkModel = val
      })
    },
    handleCheckItemChange(val) {
      for (let i = 0; i < this.taskListBox.length; i++) {
        if (this.taskListBox[i].checkModel !== val) {
          this.checkAll = false
          return
        }
      }
      this.checkAll = val
    },
    deleteAll() {
      if (this.checkAll) {
        this.$confirm('确认要删除全部吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.taskListBox = []
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
      }
    },
    deleteList(index) {
      this.$confirm('确认要删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.taskListBox.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    // 添加题库
    addQuestions() {
      this.$router.push({ name: 'Addtestpaper', query: { click: 'addQuestion' }})
    },
    // 编辑
    editList() {
      this.addQuestions()
    },
    // 统计
    showStatistics() {
      this.statisticsDialog = true
    },
    // 审核
    auditQuestion() {
      switch (this.topicType) {
        case 'singleChoice':
          this.$router.push({ name: 'Singlechoice', query: { click: 'audit' }})
          break
        case 'muchChoiceit':
          this.$router.push({ name: 'Muchchoiceit', query: { click: 'audit' }})
          break
        case 'judge':
          this.$router.push({ name: 'Judge', query: { click: 'audit' }})
          break
        case 'shortAnswer':
          this.$router.push({ name: 'Shortanswer', query: { click: 'audit' }})
          break
        case 'indefinite':
          // 不定项跳多选页面
          this.$router.push({ name: 'Muchchoiceit', query: { click: 'audit' }})
          break
        case 'cloze':
          this.$router.push({ name: 'Cloze', query: { click: 'audit' }})
          break
        default:
          this.$router.push({ name: 'Material', query: { click: 'audit' }})
          break
      }
    },
    // 导出表格
    exportExcel() {
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    }
  }
}
</script>
<style lang="scss" scoped>
.searchBox {
  .taskListBox {
    ul {
      padding: 0;
      margin: 0;
      li {
        height: 100px;
        background-color: #f8f6f6;
        display: flex;
        align-items: center;
        padding: 10px 20px;
        border-radius: 10px;
        box-shadow: 0 0 5px #a7a7a7;
        .status {
          width: 150px;
          text-align: center;
          flex-shrink: 0;
        }
        .status.active1 {
          color: #00ccff;
        }
        .status.active2 {
          color: #07be07;
        }
        .status.active3 {
          color: #ff0000;
        }
        .status.active4 {
          color: #666666;
        }
        .title {
          flex-grow: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .operator {
          color: #333;
          font-size: 12px;
          flex-shrink: 0;
          .operator-list {
            margin: 10px;
          }
        }
        .handle {
          flex-shrink: 0;
          display: flex;
          margin-left: 50px;
          // width: 200px;
          .littleBtn {
            display: block;
            margin: 0;
            margin-right: 10px;
          }
          .lastBtn {
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>
